<template>
  <div>
    <br>
    <el-form :inline="true">
      <el-form-item label="房源编号">
        <el-input v-model="searchMap.house_id" placeholder="房源编号"></el-input>
      </el-form-item>



      <el-form-item label="签约日期">
        <el-date-picker
          type="date"
          v-model="searchMap.start_date">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          type="date"
          v-model="searchMap.end_date">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="合同内容">
<el-input v-model="searchMap.content" placeholder="合同内容"></el-input></el-form-item>-->
      <el-form-item label="状态">
        <el-input v-model="searchMap.status" placeholder="状态"></el-input>
      </el-form-item>
      <!--<el-form-item label="备注">
<el-input v-model="searchMap.remark" placeholder="备注"></el-input></el-form-item>-->

      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">新增</el-button>
    </el-form>
    <el-table
      :data="list"
      border
      style="width: 100%">
      <el-table-column prop="id" label="编号" width="200"></el-table-column>
      <el-table-column prop="house_id" label="房源编号" width="200"></el-table-column>
      <el-table-column prop="broker_name" label="业主姓名" width="180"></el-table-column>
      <el-table-column prop="bname" label="租户姓名" width="180"></el-table-column>
      <el-table-column prop="start_date" label="签约日期" width="180"></el-table-column>
      <el-table-column prop="end_date" label="结束日期" width="180"></el-table-column>
      <el-table-column prop="content" label="合同内容" width="280"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="正常"
            inactive-value="到期"
            active-text="正常"
            inactive-text="到期"
            @change="changeSwitch(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="80"></el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="400">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)"  size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
          <el-button @click="view(scope.row)" type="success" size="small">预览</el-button>
          <el-button @click="exportPdf(scope.row.id)" type="success" size="small">生成合同</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="fetchData"
      @current-change="fetchData"
      :current-page.sync="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="80px">
        <el-form-item label="房源编号">
          <el-input v-model="pojo.house_id"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="pojo.broker_name"></el-input>
        </el-form-item>
        <el-form-item label="租户姓名">
          <el-input v-model="pojo.bname"></el-input>
        </el-form-item>
        <el-form-item label="签约日期">
          <el-date-picker
            type="date"
            v-model="pojo.start_date"
          value-format="yyyy-MM-dd">

          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            type="date"
            v-model="pojo.end_date" value-format="yyyy-MM-dd">

          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同内容">
          <el-input v-model="pojo.content"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pojo.remark"></el-input>
        </el-form-item>

        <el-button type="primary" @click="handleSave()">保存</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </el-form>
    </el-dialog>
    <el-dialog title="合同预览" :visible.sync="viewVisible">
      <h2>合同编号：{{viewData.id}}</h2>
      <h2>房源编号：{{viewData.house_id}}</h2>
      <h4>业主姓名：{{viewData.broker_name}}</h4>
      <h4>租户姓名：{{viewData.bname}}</h4>

      <h2>条款：</h2>
      <p>根据《中华人民共和国合同法》、《中华人民共和国城市房地产管理法》及其他有关法律、法规之规定，在平等、自愿、协商一致的基础上，甲乙双方就房屋租赁达成如下协议：

        　　第一条 出租房屋基本情况。甲方所出租的房屋(以下简称该房屋)坐落于： ，位于第 层，共 套/间，房屋结构为 ，建筑面积为 平方米，套内使用面积 平方米，房地产权证号为 。

        　　第二条 租赁房屋用途。该房屋用途为： ，除双方另有约定外，乙方不得擅自改变房屋用途。

        　　第三条 租赁期限。租赁期限为 年，自 年 月 日起至 年 月 日止。

        　　第四条 租金。该房屋租金按 计算， 租金为人民币 元整。

        　　第五条 付款方式。租金按 结算，第一 ( 至 )租金由乙方于租赁期限起始日后 租金由乙方分别于各 首月开始后的 日内交付给甲方。

        　　第六条 交付房屋期限。甲方应于本合同生效之日起 日内，将该房屋交付给乙方。

        　　第七条 甲方对房屋产权的承诺。甲方保证在交付出租房时该房屋没有使用权与产权纠纷;交房后如有未清事项，由甲方承担全部责任，由此给乙方造成经济损失的，由甲方负责赔偿。

        　　第八条 维修养护责任。租赁期间，甲方对房屋及其附着设施每半年检查、修缮一次，乙方应予积极协助，不得阻挠施工。

        　　正常的房屋大修理费用由甲方承担，日常的房屋维修费用由乙方承担。因乙方管理使用不善造成房屋及其相连设备的损失和维修费用，由乙方承担并负责赔偿损失。租赁期间，防火安全，门前三包，综合治理及安全、保卫等工作，乙方应执行当地有关部门规定并承担全部责任和服从甲方监督检查。

        　　第九条 关于装修和改变房屋结构的约定。乙方可以进行必要的装修与添臵必要的设备，但不得随意损坏房屋设施、结构，如需改变房屋的内部结构或设臵对房屋结构影响的设备，需经征得甲方书面同意，投资由乙方自理，退租时，除另有约定外，乙方有权撤走其投入的可移动设备及用具，对房屋的装修，双方协商折旧处理。

        　　第十条 关于房屋租赁期间的有关费用。

        　　1、在房屋租赁期间，以下费用由乙方支付，并由乙方承担延期付款的违约责任：

        　　(1)水、电费;

        　　(2)煤气费;

        　　(3)供暖费;

        　　2、该房屋的物业管理费由乙方负责。

        　　第十一条 出租房屋如须到政府管理部门办理有关登记备案手续及交纳有关税费的，由甲方负责。

        　　第十二条 租赁期满后，本合同即终止，届时乙方须将房屋退还甲方。如乙方要求继续租赁，则须提前 个月书面向甲方提出，甲方在合同期满前 个月内向乙方正式书面答复，如同意继续租赁，则续签租赁合同。乙方在同等条件下享有优先租赁权。

        　　第十三条 因乙方责任终止合同的约定。乙方有下列情形之一的，甲方可终止合同并收回房屋，造成甲方损失，由乙方负责赔偿：

        　　1、擅自将承租的房屋转让、转借他人或擅自调换使用;

        　　2、故意损坏承租房屋。

        　　第十四条 因甲方责任终止合同的约定。甲方有下列情形之一的，乙方可终止合同并退还房屋，给乙方造成的损失，由甲方负责赔偿：

        　　1、房屋存在产权等争议致使乙方不能正常使用的;

        　　2、房屋存在重大安全隐患的;

        　　3、水、电、气等经常不能保证或者水、电、气等设施出现故障，经通知甲方在10日内不能解决完毕，影响乙方正常经营或生活的。

        　　第十五条 提前终止合同。租赁期间，任何一方提出终止合同，需提前1个月书面通知对方，经双方协商后签订终止合同书。

        　　第十六条 违约责任。租赁期间双方必须信守合同，任何一方违反本合同的规定，须向对方支付该房屋年租金的10%作为违约金。

        　　第十七条 本合同未尽事项，由双方另行议定，并签订补充协议。

        　　第十八条 其它约定。在签订与履行本合同过程中，甲方不得因租金、租房面积、履行时间等事项以及任何理由向乙方相关人员请客、送礼、给予回扣、佣金、有价证券、实物或其他任何形式的好处，否则无论数额大小，都视为甲方违约，甲方应按该房屋年租金的20%向乙方支付违约金，并赔偿因此给乙方造成的损失，同时乙方有权单方解除合同;如果乙方有关经办人员向甲方索取任何形式的好处，甲方应当告知乙方，乙方将按照相关规定严肃处理。

        　　第十九条 本合同共 肆 页，一式 贰 份，甲、乙双方各执一份，均具有同等效力，自双方签字盖章起生效。

        　　甲方：_______________ 乙方：____________ 甲方代理人: 乙方代理人：

        　　________ 年____ 月____ 日 ________年____ 月___ 日</p>
      <h2>合同内容：</h2>
      <p>{{viewData.content}}</p>
      <h2>签约日期：</h2>
      <p>{{viewData.start_date}}</p>
      <h2>结束日期：</h2>
      <p>{{viewData.end_date}}</p>
    </el-dialog>
  </div>
</template>
<script>
  import contractApi from '@/api/contract'
  import exportApi from '@/api/export'

  export default {
    data() {
      return {
        list: [],
        total: 0, // 总记录数
        currentPage: 1, // 当前页
        pageSize: 10, // 每页大小
        searchMap: {}, // 查询条件
        dialogFormVisible: false, // 编辑窗口是否可见
        pojo: {}, // 编辑表单绑定的实体对象
        cityList: [], // 城市列表
        id: '' ,// 当前用户编辑的ID
        viewVisible:false,
        viewData:{}
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        contractApi.search(this.currentPage, this.pageSize, this.searchMap).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
        })
      },
      handleSave() {
        contractApi.update(this.id, this.pojo).then(response => {
          this.$message({
            message: response.message,
            type: (response.flag ? 'success' : 'error')
          })
          if (response.flag) { // 如果成功
            this.fetchData() // 刷新列表
          }
        })
        this.dialogFormVisible = false // 关闭窗口
      },
      handleEdit(id) {
        this.id = id
        this.dialogFormVisible = true // 打开窗口
        if (id !== '') { // 编辑
          contractApi.findById(id).then(response => {
            if (response.flag) {
              this.pojo = response.data
            }
          })
        } else {
          this.pojo = {} // 清空数据
        }
      },
      handleDelete(id) {
        this.$confirm('确定要删除此纪录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          contractApi.deleteById(id).then(response => {
            this.$message({message: response.message, type: (response.flag ? 'success' : 'error')})
            if (response.flag) {
              this.fetchData() // 刷新数据
            }
          })
        })
      },
      changeSwitch (data) {
          contractApi.update(data.id, data).then(response => {
              this.$message({
                  message: response.message,
                  type: (response.flag ? 'success' : 'error')
              })
              if (response.flag) { // 如果成功
                  this.fetchData() // 刷新列表
              }
          })
      },
      exportPdf(id){
          exportApi.pdf(id).then(response=>{
              this.$message({
                  message: response.message,
                  type: (response.flag ? 'success' : 'error')
              })
          })
      },
      view(data){
          this.viewVisible = true
          this.viewData = data
      }
    }
  }
</script>
